<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Shopping Page</title>
    <style>
        .container {
            width: 359px;
            height: 240px;
            background-image: url("tupian/titile.png");
            background-repeat: repeat;
            background-size: cover;
        }
        
        .search-bar {
            width: 359px;
            height: 100px;
            background-image: url("tupian/mine.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .search-img {
            width: 344px;
            height: 166px;
            background-image: url("tupian/home_cmd_sm.png");
            background-repeat: no-repeat;
            background-size: cover;
            padding-top: 5px;
        }
        
        .header-icons {
            width: 150px;
            height: 20px;
            background-image: url("tupian/home_cmd_title.png");
            background-repeat: no-repeat;
            background-size: cover;
            margin: 8px;
        }
        
        .banner {
            width: 86px;
            height: 116px;
            background-image: url("tupian/home_cmd_inner.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .one {
            width: 70px;
            height: 100px;
            background-image: url("tupian/ong.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .two {
            width: 70px;
            height: 100px;
            background-image: url("tupian/two.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .three {
            width: 70px;
            height: 100px;
            background-image: url("tupian/three.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .description {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        
        .price {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        
        .row {
            width: 168px;
            height: 161px;
        }
        
        .row2 {
            width: 168px;
            height: 161px;
        }
        
        .text {
            margin: 0 auto;
            height: 22px;
            width: 140;
            display: flex;
            justify-content: space-between;
            align-items: end;
        }
        
        .text :nth-child(1) {
            color: #434343;
            font-size: 14px;
            font-weight: bolder;
        }
        
        .text :nth-child(2) {
            color: #6C6C6C;
            font-size: 11px;
            font-weight: bolder;
        }
        
        .image {
            width: 71px;
            height: 120px;
            background-image: url("tupian/shoutibao.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .image2 {
            width: 71px;
            height: 115px;
            background-image: url("tupian/tuzi.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .image3 {
            width: 71px;
            height: 115px;
            background-image: url("tupian/bao.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .image4 {
            width: 71px;
            height: 115px;
            background-image: url("tupian/t.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>

    <header>
        <div class="container"></div>
    </header>

    <div class="search-bar"></div>

    <div class="search-img">
        <div class="header-icons"></div>
        <div class="description">
            <div class="banner"></div>
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>

    <div class="price">
        <div class="row">
            <div class="text">
                <span>爆款推荐</span>
                <span>最受欢迎</span>
            </div>
            <div class="description">
                <div class="image"></div>
                <div class="image2"></div>
            </div>
        </div>
        <div class="row2">
            <div class="price">
                <div class="row">
                    <div class="text">
                        <span>一站买全</span>
                        <span>最受欢迎</span>
                    </div>
                    <div class="description">
                        <div class="image3"></div>
                        <div class="image4"></div>
                    </div>
                </div>
                <div class="row2"></div>
            </div>
        </div>
    </div>



</body>

</html>